<template>
  <div id="login">
    <div id="login-form">
      <div class="light font-26 weight-bold mb-40">后 台 管 理 系 统</div>
      <!-- 账号密码表单 -->
      <el-form
        :model="loginForm"
        :rules="loginRules"
        ref="ruleForm"
        class="demo-ruleForm"
      >
        <el-form-item prop="userName">
          <i class="login-icon el-icon-s-custom"></i>
          <el-input v-model="loginForm.userName" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item prop="password">
          <i class="login-icon el-icon-lock"></i>
          <el-input
            :type="psdType"
            class="password-input"
            v-model="loginForm.password"
            placeholder="请输入密码"
          />
          <i
            v-show="psdType === 'text'"
            @click="changePsdType"
            class="login-icon el-icon-view pointer"
          />
          <span
            @click="changePsdType"
            v-show="psdType === 'password'"
            class="login-icon pointer"
          >
            <svg-icon class="eye-close" name="eye-close" />
          </span>
        </el-form-item>
      </el-form>
      <!-- 登录按钮 -->
      <el-button
        :loading="isLogin"
        style="width:100%;"
        type="primary"
        @click="loginFn"
      >
        登 录
      </el-button>
    </div>
  </div>
</template>

<script>
import reg from "@/utils/validate";
export default {
  data() {
    return {
      psdType: "password",
      isLogin: false,
      loginForm: { userName: "admin@qq.com", password: "admin" },
      loginRules: {
        userName: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          {
            pattern: reg.Email,
            message: "请输入正确格式的邮箱",
            trigger: "blur"
          }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  methods: {
    // 修改密码输入框类型
    changePsdType() {
      if (this.psdType === "password") {
        this.psdType = "text";
      } else {
        this.psdType = "password";
      }
    },
    // 登录
    loginFn() {
      this.isLogin = true;
      setTimeout(() => {
        this.isLogin = false;
        this.$router.push({ name: "material" });
      }, 1000);
    }
  }
};
</script>

<style lang="scss">
#login {
  .el-form-item__content {
    border: 1px solid $login-input-border;
    height: 50px;
    border-radius: 4px;
    .login-icon {
      float: left;
      width: 50px;
      color: $login-input-icon;
      font-size: $font-18;
      background-color: $login-input-bg;
      height: 100%;
      line-height: 50px;
    }
    .eye-close {
      width: 18px;
      height: 18px;
      float: left;
      @include hv-center;
    }
    .el-input {
      float: left;
      height: 100%;
      width: calc(100% - 50px);
    }
    .password-input {
      width: calc(100% - 100px);
    }
    input {
      background-color: $login-input-bg;
      border: none;
      height: 100%;
      color: $default-light;
      padding-left: 0;
    }
  }
}
</style>
<style lang="scss" scoped>
#login {
  width: 100vw;
  height: 100vh;
  background-color: $frame-primary;
  text-align: center;
}
#login-form {
  width: 450px;
  margin: 0 auto;
  padding-top: 25vh;
}
</style>
